import React, { Component } from 'react';
import './todo.css'

class Todo extends Component {
  // 获取本地数据或使用默认数据
  todolist = JSON.parse(sessionStorage.getItem('list')) || [{ id: 1, data: '吃饭', meta: true }, { id: 2, data: '睡觉', meta: true }, { id: 3, data: '打豆豆', meta: true }]
  sensitive = ['admin', '小明', '小刚', '小灰狼', '牛牛']
  // 增加功能
  enterfn = (e) => {
    // 判断回车
    if (e.keyCode !== 13) return
    // 非空判断
    if (e.target.value.trim() === '') return alert('不能为空')
    // 长度判断
    if (e.target.value.trim().length >= 7) {
      e.target.value = ''
      alert('长度不能大于7')
      return
    }
    // 不得重复判断
    if (this.todolist.filter(item => item.data === e.target.value.trim()).length !== 0) {
      e.target.value = ''
      alert('不能重复')
      return
    }
    // 不得包含敏感词
    let ret = this.sensitive.some(item => {
      return e.target.value.trim().indexOf(item) !== -1
    })
    if (ret) {
      e.target.value = ''
      alert('不能包含敏感词')
      return
    }
    // 数据追加
    this.todolist.push({
      id: new Date().getTime(),
      data: e.target.value.trim(),
      meta: true
    })
    e.target.value = ''
    // 持久化
    sessionStorage.setItem('list', JSON.stringify(this.todolist))
    this.forceUpdate()
  }
  // 切换列表功能
  metafn = (e, id) => {
    // 取反meta
    this.todolist.filter(item => item.id === id)[0].meta = !this.todolist.filter(item => item.id === id)[0].meta
    sessionStorage.setItem('list', JSON.stringify(this.todolist))
    this.forceUpdate()
  }
  // 修改
  valfn = (e, id) => {
    // 判断回车
    if (e.keyCode !== 13) return
    // 回车提示修改
    if (window.confirm('是否确认修改')) {
      this.todolist.filter(item => item.id === id)[0].data = e.target.value
    } else {
      e.target.value = this.todolist.filter(item => item.id === id)[0].data
    }
    sessionStorage.setItem('list', JSON.stringify(this.todolist))
    this.forceUpdate()
  }
  // 删除
  delfn = (e, id) => {
    this.todolist = this.todolist.filter(item => item.id !== id)
    sessionStorage.setItem('list', JSON.stringify(this.todolist))
    this.forceUpdate()
  }
  render() {
    return (
      <div className="todo">
        <h1>TodoList</h1>
        <input className="inp1" type="text" onKeyUp={(e) => this.enterfn(e)} placeholder="请输入你想要添加的内容并回车保存 " />
        <ul className="ul1">
          {this.todolist.filter(item => item.meta === true).map(item =>
            <li key={item.id}>
              <input type="checkbox" onChange={(e) => this.metafn(e, item.id)} />
              <input className="inpv" type="text" defaultValue={item.data} onKeyUp={(e) => this.valfn(e, item.id)} />
              <button onClick={(e) => this.delfn(e, item.id)}>删除</button>
            </li>
          )}
        </ul>
        <h1>DoingList</h1>
        <ul className="ul1">
          {this.todolist.filter(item => item.meta === false).map(item =>
            <li key={item.id}>
              <input type="checkbox" onChange={(e) => this.metafn(e, item.id)} />
              <input className="inpv" type="text" defaultValue={item.data} />
              <button onClick={(e) => this.delfn(e, item.id)}>删除</button>
            </li>
          )}
        </ul>
        <h6>@卷上天-唐博宇</h6>
      </div>
    );
  }
}

export default Todo;
